<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>日历插件</title>
		<link rel="stylesheet" href="css/tdCalendarWrap.css">
		<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
		<script src="js/tdCalendarWrap.js" type="text/javascript"></script>
		<style type="text/css">
			body,html{width:100%;height:100%;margin:0;}
			.result{width:100%;height:100px;text-align:center;font-size:12px;padding:10px;box-sizing:border-box;overflow-y:auto;}
			.container{width:100%;height:calc(100% - 100px);overflow-y:auto;}
		</style>
	</head>
	<body>
		<div class="result">
			<button onclick="getTdCalendarWrapSelectDate()">获取选择的日期</button>
			<div id="selectDateShw"></div>
		</div>
		<div class="container">
			<div id="tdCalendarWrap"></div>
		</div>
	</body>
	<script>
		$(function () {
			$("#tdCalendarWrap").tdCalendarWrap({
				// 已选择的日期 初始化值
				selectedDate: ["2022-05-09", "2022-05-19", "2022-05-01"],
				// 最大选择数量
				selectedSizeMax: 4,
				// 可选择的日期 null 表示都可选  直接传日期 或 对象中传都ok
				optionalDate: [
					"2022-05-09",
					"2022-05-10",
					"2022-05-19", {
						date: "2022-05-08",
					}, {
						date: "2022-03-25",
					}, {
						date: "2022-04-01",
						// 上面展示的字
						upText: "愚人节",
						// 下面展示的字
						downText: "哈哈",
						// 下面展示的字
						selectDownText: "嘿嘿",
					}, {
						date: "2022-05-01",
						// 上面展示的字
						upText: "劳动节",
						// 下面展示的字
						downText: "劳动",
						// 下面展示的字
						selectDownText: "加油",
					}],
				// 可选日期配置
				optionalDateConfig: {
					// 下面展示的字
					downText: "抢",
					// 下面展示的字
					selectDownText: "多选",
				},
				// 显示开始月份
				showStartYearMouth: "2022-04",
				// 显示结束月份 默认一年
				showEndYearMouth: "2022-06",
				// 当选择后执行的回调
				// clickDate 当前点击的日期对象
				// selectedDate 全部选择的日期对象列表
				// elem 点击的dom元素
				done: function (clickDate, selectedDate, elem) {
					console.log("selectedDate", selectedDate.join(','));
					getTdCalendarWrapSelectDate();
				},
				// 当选择数量超过后的回调后执行的回调
				// clickDate 当前点击的日期对象
				// selectedSize 已选择的数量
				// elem 点击的dom元素
				selectedSizeExceed: function (clickDate, selectedSize, elem) {
					alert("对多选择" + selectedSize + "个日期");
				}
			});
			getTdCalendarWrapSelectDate();
		});

		function getTdCalendarWrapSelectDate() {
			var selectedDate = $("#tdCalendarWrap").tdCalendarWrap("getSelectedDate");
			if (selectedDate && selectedDate.length > 0) {
				$("#selectDateShw").html("共选择" + selectedDate.length + "个日期<br/>" + JSON.stringify(selectedDate));
			} else {
				$("#selectDateShw").html("暂未选择日期");
			}
		}

	</script>
</html>
